<!DOCTYPE html>
<html lang="en" xmlns:th="www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title th:text="${book.bookName}+'——详情'"></title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>

<body>
<br/>
<div class="container-fluid">
    <div class="row-fluid">
        <div class="span12">
            <h1 class="text-center">
                <a href="/index" style="text-decoration-line: none;color: black">📕亚牛逊图书</a>
            </h1>
            <ul class="nav nav-pills">
                <li><a href="/index">首页</a></li>
                <li><a href="/book/bookList/0/0">书单</a></li>
                <li><a href="/recommend/rank">排行</a></li>
                <li><a href="/recommend/hot">热门</a></li>
                <li class="dropdown pull-right">
                    <a href="#" data-toggle="dropdown" class="dropdown-toggle">我的<strong class="caret"></strong></a>
                    <ul class="dropdown-menu">
                        <li th:if="not ${userInfo}"><a href="/user/login" th:text="欢迎，请先登录"></a></li>
                        <li th:if="${userInfo}"><a href="#" th:text=('欢迎，'+${userInfo})></a></li>
                        <li th:if="${userInfo}" class="divider"></li>
                        <li th:if="${userInfo}"><a href="/user/profile" th:text="个人中心"></a></li>
                        <li th:if="${userInfo}"><a href="/user/collection" th:text="收藏"></a></li>
                        <li th:if="${userInfo}"><a href="/user/logoutAction" th:text="注销"></a></li>
                    </ul>
                </li>
                <li class="pull-right" th:if="not ${userInfo}"><a href="/user/register">注册</a></li>
                <li class="pull-right" th:if="not ${userInfo}"><a href="/user/login">登录</a></li>
            </ul>
            <center>
                <div class="page-header">
                    <h2 th:text="'《'+${book.bookName}+'》'"></h2>
                </div>
            </center>
            <div class="row">
                <center>
                    <div class="col-md-6">
                        <!-- 不知道为啥读取不了本地图片，随便找张网上图片 -->
                        <img style="max-width: 260px;max-height: 260px" alt="260x260"
                             src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2997852669,4016981319&fm=11&gp=0.jpg"
                             class="img-thumbnail"/>
                        <br/>
                        <!-- setScale(2, 4) 代表保留两位小数, 4 的意思是 HALF_UP，即向上舍入 -->
                        <h2 th:text="${rating.get(book.bookId).setScale(2, 4)}+' 分'"></h2>
                        <div th:if="${ratingMsg}">
                            <button type="button" class="btn btn-warning btn-large" th:text=${ratingMsg}></button>
                        </div>
                        <div class="btn-group">
                            <h4><small>我也打个分</small></h4>
                            <form method="post" action="/rating/addRating">
                                <input type="hidden" name="bookId" th:value="${book.bookId}">
                                <button class="btn" type="submit" name="score" value="1">⭐</button>
                                <button class="btn" type="submit" name="score" value="2">⭐</button>
                                <button class="btn" type="submit" name="score" value="3">⭐</button>
                                <button class="btn" type="submit" name="score" value="4">⭐</button>
                                <button class="btn" type="submit" name="score" value="5">⭐</button>
                                <button class="btn" type="submit" name="score" value="6">⭐</button>
                                <button class="btn" type="submit" name="score" value="7">⭐</button>
                                <button class="btn" type="submit" name="score" value="8">⭐</button>
                                <button class="btn" type="submit" name="score" value="9">⭐</button>
                                <button class="btn" type="submit" name="score" value="10">⭐</button>
                            </form>
                        </div>
                        <br/><br/>
<!--                        <div>-->
<!--                            <button class="btn" type="button"><a href="#" th:text="加入收藏"></a></button>-->
<!--                        </div>-->
                    </div>
                </center>
                <div class="col-md-6">
                    <table class="table">
                        <thead>
                        <tr>
                            <th>作者</th>
                            <th>出版社</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>
                                <p th:text="${book.author}"></p>
                            </td>
                            <td>
                                <p th:text="${book.publisher}"></p>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                    <br/>
                    <h1 th:text="'￥'+${#numbers.formatDecimal(book.price, 1, 'COMMA', 2, 'POINT')}"></h1>
                    <br/>
                    <div style="margin-left: 30px">
                        <a class="btn btn-warning btn-large" th:href="'/book/orderAction/'+${book.bookId}">立即购买！</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<center>
    <h3>买了这本书的人还喜欢：</h3>
</center>

<div class="container-fluid">
    <div class="row-fluid">
        <ul class="thumbnails">
            <li class="col-md-2" th:each="rec:${concurSimRecs}">
                <div class="thumbnail"><img style="max-width: 100px;max-height: 100px" alt="260x260"
                                            src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2997852669,4016981319&fm=11&gp=0.jpg"/>
                    <div class="caption">
                        <h3 th:text="${rec.bookName}"></h3>

                        <h4 th:text="'￥'+${#numbers.formatDecimal(rec.price, 1, 'COMMA', 2, 'POINT')}"></h4>

                        <p><a class="btn btn-primary" th:href="'/book/detail/'+${rec.bookId}">浏览</a></p>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</div>

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
        integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
        crossorigin="anonymous"></script>

</body>
</html>